<template>
  <div id="cardBag">
    <div
      class="card"
      @click="addbankCard"
      v-if="formatting.bank_card_no == ''||formatting.bank_card_no == null"
    >
      <span>+</span>
      <span>添加银行卡</span>
    </div>
    <div class="card_have" v-if="formatting.bank_card_no">
      <div class="title">
        <span class="bank">{{formatting.bank_name}}</span>
        <span class="icon">
          <van-icon name="delete" @click="delbankCard" />
        </span>
      </div>
      <div class="card_num">
        <!-- {{formatting.bank_card_no}} -->
        {{formatting.encryption}}
      </div>
    </div>
    <div class="goin" v-if="formatting.bank_card_no">
      <van-button
        color="linear-gradient(to right, #4bb0ff, #6149f6)"
        @click="goEdit"
        size="small"
        block
        round
        class="goin"
      >修改</van-button>
    </div>
    <!--弹窗-->
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import Dialog from "../../../static/vant/dialog/dialog";
export default {
  data() {
    return {
      formatting: {}
    };
  },
  onShow() {
    // 获取银行卡列表
    this.bankCardList();
  },
  methods: {
    // 获取银行卡列表
    bankCardList() {
      this.$http
        .post({
          url: "/mobile/api/mybankcard",
          data: {
            customer_id: wx.getStorageSync("userInfo").customer_id
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            var reg = /^(\d{4})\d+(\d{4})$/;
            const encryption = res.data.bank_card_no.replace(
              reg,
              "$1 **** **** $2"
            ); // 将银行卡号 中间8为转为*
            res.data.encryption = encryption;
            this.formatting = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // 删除银行卡
    delbankCard() {
      Dialog.confirm({
        title: "删除",
        message: "您确定删除当前银行卡吗？"
      })
        .then(() => {
          this.$http
            .post({
              url: "/mobile/api/delmybankcard",
              data: {
                customer_id: wx.getStorageSync("userInfo").customer_id
              }
            })
            .then(res => {
              if (res.code == "RX0000") {
                this.bankCardList();
              } else {
                wx.showToast({
                  title: res.data
                });
              }
            });
        })
        .catch(() => {});
    },
    addbankCard() {
      wx.navigateTo({
        url: "/pages/addCard/main"
      });
      wx.setStorageSync("objlist", ""); // 修改回显
    },
    goEdit() {
      wx.navigateTo({
        url: "/pages/addCard/main"
      });
      wx.setStorageSync("objlist", this.formatting); // 修改回显
    }
  }
};
</script>

<style lang='less'>
#cardBag {
  background: #f9f9f9;
  height: 100vh;
  .card {
    margin: 0 auto;
    margin-bottom: 10px;
    width: 335px;
    height: 88px;
    line-height: 88px;
    border: 1px dotted #ccc;
    color: #226df0;
    text-align: center;
    border-radius: 20px;
    & > span {
      display: inline-block;
    }
  }
  .card_have {
    margin: 0 auto;
    width: 335px;
    height: 88px;
    border-radius: 10px;
    background: #df4655;
    color: #fff;
    .title {
      padding: 0 10px;
      box-sizing: border-box;
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      & > span {
        display: inline-block;
      }
      .bank {
        text-align: center;
      }
      .icon {
        text-align: right;
      }
    }
    .card_num {
      height: 40px;
      line-height: 40px;
      text-align: right;
      padding-right: 20px;
      color: #fff;
    }
  }
  .goin {
    width: 90px;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
  }
}
</style>
